<script setup>
import {get_login_log, list_login_log} from "@/apis/system/v1/log/login_log.js";
import Button from "@/components/common/button.vue";

const emit = defineEmits(['search']);
const isSearch = ref(true);
const visible = ref(false);
const search = () => {
  isSearch.value = !isSearch.value;
  emit("search", isSearch.value);
};
const select = () => {
  visible.value = true;
};
const expandedKeys = ref([]);
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
});
const form = reactive({
  loading: false,
  username: true,
  ip: true,
  agent: true,
  os: true,
  country: true,
  province: true,
  city: true,
  district: true,
  isp: true,
  create_datetime: true,
});
const loginLogList = ref([]);
const loginLogObj = ref({});
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const isView = ref(false);
const permissions = ["sys:loginLog:view", "sys:loginLog:update", "sys:loginLog:delete", "sys:loginLog:add"];
const getLoginLog = (id) => {
  get_login_log(id).then(res => {
    if (res.code === 200) {
      loginLogObj.value = res.result;
      isView.value = true;
    }
  });
};
const renovate = () => {
  form.loading = !form.loading;
  setTimeout(() => {
    getLoginLogList();
    form.loading = !form.loading;
  }, 1000);
};
const getLoginLogList = () => {
  list_login_log(page.value, pageSize.value).then(res => {
    if (res.code === 200) {
      form.loading = !form.loading;
      total.value = res.result.total;
      loginLogList.value = res.result.items;
      loginLogList.value.map(item => item.key = item.id);
    }
    form.loading = !form.loading;
  });
};
const closeView = () => {
  isView.value = false;
};
const pagination = (e) => {
  page.value = e;
  getLoginLogList();
};
onMounted(() => {
  getLoginLogList();
});
</script>

<template>
  <div class="jia-handle">
    <Button :permissions="permissions"></Button>
    <div class="jia-operate">
      <div style="border-radius: 5px 0 0 5px" class="jia-flex-center"
           @click="search">
        <icon-search size="14"/>
      </div>
      <div class="jia-flex-center" @click="renovate">
        <icon-sync size="14"/>
      </div>
      <div style="border-radius: 0 5px 5px 0" class="jia-flex-center" @click="select">
        <icon-select-all size="14"/>
        <a-modal v-model:visible="visible" draggable
                 title="菜单选项" width="200px">
          <a-checkbox v-model="form.username">登录用户</a-checkbox>
          <a-checkbox v-model="form.ip">IP地址</a-checkbox>
          <a-checkbox v-model="form.agent">agent信息</a-checkbox>
          <a-checkbox v-model="form.os">操作系统</a-checkbox>
          <a-checkbox v-model="form.country">国家</a-checkbox>
          <a-checkbox v-model="form.province">省</a-checkbox>
          <a-checkbox v-model="form.city">市</a-checkbox>
          <a-checkbox v-model="form.district">县/区</a-checkbox>
          <a-checkbox v-model="form.isp">运营商</a-checkbox>
          <a-checkbox v-model="form.create_datetime">创建时间</a-checkbox>
        </a-modal>
      </div>
    </div>
  </div>
  <a-table v-if="loginLogList.length > 0" :data="loginLogList" show-empty-tree
           v-model:expandedKeys="expandedKeys" :row-selection="rowSelection"
           :loading="form.loading" :defaultExpandAllRows="true">
    <template #columns>
      <a-table-column v-if="form.username" title="登录用户" data-index="username"></a-table-column>
      <a-table-column v-if="form.ip" title="IP" data-index="ip"></a-table-column>
      <a-table-column v-if="form.agent" title="agent信息" data-index="agent"></a-table-column>
      <a-table-column v-if="form.os" title="操作系统" data-index="os"></a-table-column>
      <a-table-column v-if="form.country" title="国家" data-index="country"></a-table-column>
      <a-table-column v-if="form.province" title="省" data-index="province"></a-table-column>
      <a-table-column v-if="form.city" title="市" data-index="city"></a-table-column>
      <a-table-column v-if="form.district" title="县/区" data-index="district"></a-table-column>
      <a-table-column v-if="form.isp" title="运营商" data-index="isp"></a-table-column>
      <a-table-column v-if="form.create_datetime" title="创建时间" data-index="create_datetime"></a-table-column>
      <a-table-column :width=50 title="操作" data-index="operate">
        <template #cell="{ record }">
          <a-button type="primary" status="success" @click="getLoginLog(record.id)">
            <template #icon>
              <icon-eye/>
            </template>
          </a-button>
        </template>
      </a-table-column>
    </template>
  </a-table>
  <div class="jia-pagination">
    <a-pagination @change="pagination" :current="page" :total="total" show-total show-jumper show-page-size/>
  </div>
  <a-drawer :width="950" :visible="isView" title="登录日志" unmountOnClose
            @ok="closeView" @cancel="closeView">
    <a-form style="margin-top: 20px" :model="loginLogObj" layout="inline">
      <a-form-item class="jia-form-item" field="username" label="登录用户" required>
        <a-input v-model="loginLogObj.username" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入登录用户" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="IP" label="IP地址">
        <a-input v-model="loginLogObj.ip" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入IP地址" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="IP" label="agent信息" required>
        <a-input v-model="loginLogObj.agent" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入agent信息" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="os" label="操作系统">
        <a-input v-model="loginLogObj.os" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入操作系统" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="country" label="国家" required>
        <a-input v-model="loginLogObj.country" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入国家" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="province" label="省">
        <a-input v-model="loginLogObj.province" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入省" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="city" label="市" required>
        <a-input v-model="loginLogObj.city" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入市" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="district" label="县/区">
        <a-input v-model="loginLogObj.district" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入县/区" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="isp" label="运营商" required>
        <a-input v-model="loginLogObj.isp" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入运营商" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="create_datetime" label="创建时间">
        <a-input v-model="loginLogObj.create_datetime" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入创建时间" allow-clear></a-input>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<style scoped lang="less">
.jia-handle {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .jia-operate {
    width: 135px;
    height: 100%;
    display: flex;

    div {
      cursor: pointer;
      width: 44px;
      height: 29px;
      color: #885DFD;
      border: 1px solid #e8e8e8;

      &:nth-child(2) {
        border-left: none;
        border-right: none;
        border-top: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
      }

      &:hover {
        background: var(--active-bg1);
      }
    }
  }
}
</style>